::-webkit-scrollbar{
  width:4px;
  height:4px;
}
::-webkit-scrollbar-thumb{
  border-radius:2px;
  background:#DCDFE6;
}
::-webkit-scrollbar-track{
  background:rgba(0,0,0,0);
  border:none;
}
body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
        'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
        sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overscroll-behavior: contain;
    user-select: none;
    height: 100%;
    overflow: hidden;
}
code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',monospace;
}
.dialog-container{
  position: fixed;
  left:0;
  right:0;
  top:0;
  bottom:0;
  background-color: rgba(0,0,0,0.3);
}
.settingDialog{
  position:absolute;
  top:50px;
  left:50%;
  transform: translateX(-50%);
  background-color: #ffffff;
  border-radius:4px;
  padding:10px 20px;
  text-align: center;
  font-size:14px;
  .levelSelection{
    margin-bottom:10px;
    .selectLevel{
      color:#409eff;
      cursor:pointer;
      &+.selectLevel{
        margin-left:20px;
      }
      &:hover{
        color:#66b1ff;
        text-decoration: underline;
      }
    }
  }
  .gameSettingForm{
    margin:0 auto 10px auto;
    .columnInput{
      width:30px;
    }
    .formItem{
      position:relative;
      .itemTitle{
        line-height:26px;
        padding-right:10px;
        text-align: left;
      }
      input{
        display: block;
        padding:0;
        width:100%;
        line-height:28px;
        background: none;
        border:none;
        border-bottom:1px solid #409eff;
        outline: none;
        &:focus{
          border-bottom-color:#66b1ff;
        }
      }
    }
  }
  .errorMsg{
    color:#F56C6C;
    white-space: pre-line;
    margin-bottom:10px;
  }
  .footer{
    white-space: nowrap;
  }
  .startGame{
    border-radius:15px;
    height:30px;
    line-height:30px;
    padding:0 20px;
    color:#ffffff;
    background:#409eff;
    border:1px solid #409eff;
    cursor: pointer;
    &:hover{
      border-color:#66b1ff;
      background:#66b1ff;
    }
  }
  .cancelSetting{
    margin-left:20px;
    border-radius:15px;
    height:30px;
    line-height:30px;
    padding:0 20px;
    color:#409eff;
    background:#ffffff;
    border:1px solid #409eff;
    cursor: pointer;
    &:hover{
      border-color:#66b1ff;
      color:#66b1ff;
    }
  }
}
.gamePage{
  position: fixed;
  left:0;
  right:0;
  top:0;
  bottom:0;
  display:flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  text-align: center;
  .titleBar{
    flex:none;
    padding:4px 10px 0 10px;
    font-size:14px;
    text-align: center;
    .btnGroup{
      display: inline-block;
      vertical-align: top;
      line-height:22px;
      margin:0 10px;
      text-align: left;
      .btn-link{
        display: inline-block;
        vertical-align: top;
        color:#409eff;
        cursor:pointer;
        margin-right:20px;
        &:last-child{
          margin-right:0;
        }
        &:hover{
          color:#66b1ff;
          text-decoration: underline;
        }
      }
    }
    .statusGroup{
      display: inline-block;
      vertical-align: top;
      text-align: left;
      line-height:22px;
      margin:0 10px;
      .steps{
        display: inline-block;
        vertical-align: top;
        text-align:left;
        margin-right:20px;
      }
      .remainMines{
        display: inline-block;
        vertical-align: top;
        text-align:left;
      }
    }
  }
  .statusLine{
    flex:none;
    text-align: center;
    font-size:14px;
    line-height:18px;
    min-height: 18px;
    &.success{
      color:#67C23A;
    }
    &.failed{
      color:#F56C6C;
    }
  }
  .gamePadOuter{
    flex:auto;
    overflow: auto;
    text-align: center;
    width:100%;
  }
  .gamePad{
    display:inline-block;
    vertical-align: top;
    padding:0 10px 30px 10px;
    .gamePadRow{
      line-height:1;
      white-space:nowrap;
      .cell{
        box-sizing: border-box;
        user-select:none;
        display:inline-block;
        vertical-align:top;
        width:32px;
        height:32px;
        line-height:32px;
        font-size:16px;
        text-align:center;
        margin:1px;
        background:#DCDFE6;
        color:#303133;
        border-radius:2px;
        cursor:pointer;
        &.inactive,
        &.digged,
        &.marked{
          cursor: default;
        }
        &.mine{
          color:#F56C6C;
        }
        &.marked{
          color:#E6A23C;
          font-size:22px;
          line-height:30px;
        }
        &.digged{
          background:#F2F6FC;
          &.mine{
            color:#DCDFE6;
            background:#F56C6C;
          }
        }
      }
    }
  }
}
